<script setup lang="ts">
import { reactive, provide } from 'vue';
import { myStore } from '@/store/my';
import ProjectExperiencePopup from './ProjectExperiencePopup.vue';
import { projectDelete } from '@/api/my';
import { showToast } from 'vant';
const store: any = myStore();
const state = reactive({
  show: false,
  item: {},
});
const props = defineProps({
  page: {
    type: String,
  },
});
const closeChange = () => {
  state.show = false;
  store.getResumeDetail();
};
const submitDelete = async (id: any) => {
  const res: any = projectDelete({
    id: id,
  });
  if (res) {
    showToast('删除成功');
    store.getResumeDetail();
  } else {
    showToast('删除失败');
  }
};
const addWork = () => {
  state.item = {
    uuid: store.resumeInfo.id,
  };
  state.show = true;
};
const editWork = (item: any) => {
  state.item = item;
  state.show = true;
};
provide('popup', {
  closeChange,
});
</script>
<template>
  <div class="resume-label">
    <h3>项目经历<van-icon v-if="props.page !== 'preview'" @click="addWork" name="add-o" /></h3>
    <van-swipe-cell
      v-if="store.projectList.length"
      v-for="(item, index) in store.projectList"
      :key="index"
    >
      <h4>
        {{ item.project_name
        }}<van-icon v-if="props.page !== 'preview'" @click="editWork(item)" name="arrow" />
      </h4>
      <p>{{ item.project_start_time }} - {{ item.project_end_time }}</p>
      <h5>项目经历</h5>
      <van-field v-model="item.project_duty" autosize readonly label="" type="textarea" />
      <template #right v-if="props.page !== 'preview'">
        <img
          @click="submitDelete(item.project_id)"
          src="@/assets/img/icon/icon-delete.png"
          class="delete"
        />
      </template>
    </van-swipe-cell>
    <label v-else>请您填写项目经历</label>
  </div>

  <!--弹窗-->
  <van-popup
    v-model:show="state.show"
    position="top"
    duration="0"
    :style="{ width: '100%', height: '100%' }"
  >
    <ProjectExperiencePopup :item="state.item"></ProjectExperiencePopup>
  </van-popup>
</template>
<style scoped>
.text-list dt {
  font-size: 0.59rem;
  line-height: 0.59rem;
  font-weight: 300;
  color: #666666;
  padding: 0.4rem 0.5rem;
  margin-right: 0.27rem;
  margin-bottom: 0.3rem;
  background: #f6f7f8;
  border-radius: 0.16rem;
  display: inline-block;
}
</style>
